<template>
  <div class="trueinfobox">
    <p class="trueinfobox-title cmtitle">实名信息</p>

    <div class="often-contact flex ">
      <span class="pt5">常用参观人</span>
      <div class="often-contact-b flex1">
      <div >
        <el-button @click="adduser(city.id)" size="mini" class="check-btn" :class="{'check-btn-cur': hadId(city.id)}" :key="city.id" v-for="city in cities" >{{ city.realname }}</el-button>
      </div>
      </div>
    </div>
    <div class="added-person flex">
      <div
        class="added-person-item flex jcs alc"
        v-for="item in checkboxGroup2"
        :key="item.id"
      >
        <div>
          <p class="per-name">
            <span>{{ item.realname }}</span>
            <span class="yong" v-if="item.youngFlag === 'Y'">未满14岁</span>
            <span v-if="item.youngFlag === 'Y'" @click="showedit1(item)" class="fs12 fw400 cl0097 pl10 curp">关联成人 > </span>
          </p>
          <p class="p-number">{{getCardType(item.certificateType)}} {{item.certificateNo}}</p>
          <p v-if="item.needCard" class="need-card war" @click="showedit2(item)"><i class="el-icon-warning-outline"></i> 请选择免费证件类型 > </p>
          <p v-else class="cl0097" @click="showedit2(item)">{{(getDiscountCertificatesMap(item.extraCertType))}}</p>
        </div>
        <img src="../../assets/1.png" alt="" @click="showedit(item)" />
      </div>
      <div class="add-box flex jcc alc">
        <el-button size="small" @click="add2" type="success" plain>添加参观人</el-button>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      custom-class="trueinfomodal"
      width="480px"
    >
      <div slot="title" class="fw600 fs16">添加参观人</div>

      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-row class="flex jcs">
          <el-col :span="12" class="mr20">
            <p class="pb10 flex alc">
              <span>姓名</span>
              <img class="tips" :src="require('../../assets/4.png')" alt="" />
            </p>
            <el-form-item prop="realname" >
              <el-input v-model="form.realname" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <p class="pb10 flex alc">
              <span>证件类型</span>
              <img class="tips" :src="require('../../assets/4.png')" alt="" />
            </p>
            <el-form-item prop="certificateType" >
              <el-select v-model="form.certificateType" placeholder="请选择">
                <el-option :label="item.val" :value="item.key" :key="item.key" v-for="item in cardTypeList"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <p class="pb10 flex alc">
              <span>证件号码</span>
              <img class="tips" :src="require('../../assets/4.png')" alt="" />
            </p>
            <el-form-item class="w100" prop="certificateNo">
              <el-input v-model="form.certificateNo" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="text-right">
          <el-col :span="24" >
            <el-form-item>
              <el-button  @click="resetForm('ruleForm')"
                >取消</el-button
              >
              <el-button type="primary"  @click="submitForm('ruleForm')">确认提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>

     <el-dialog
      :visible.sync="dialogFormVisible1"
      :close-on-click-modal="false"
      custom-class="trueinfomodal"
      width="480px"
    >
      <div slot="title" class="fw600 fs16">
        <div class="fw600 fs16">关联成人信息 <span class="fw400 pl10 fs14 cl9">14岁以下儿童可绑定成人身份证入场</span></div>
      </div>

      <el-form :model="form1" ref="ruleForm1" >
        <el-row>
          <el-col :span="24">
            <p class="pb10 flex alc">
              <span>关联成人信息</span>
            </p>
            <el-form-item class="w100" prop="relativeId">
              <el-select  v-model="form1.relativeId" placeholder="请选择关联成人信息">
                <el-option
                  v-for="item in auditOption"
                  :key="item.id"
                  :label="item.realname"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="text-right">
          <el-col :span="24" >
            <el-form-item>
              <el-button  @click="resetForm1('ruleForm1')"
                >取消</el-button
              >
              <el-button type="primary"  @click="submitForm1('ruleForm1')">确认关联</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>

      <el-dialog
      :visible.sync="dialogFormVisible2"
      :close-on-click-modal="false"
      custom-class="trueinfomodal"
      width="480px"
    >
      <div slot="title" class="fw600 fs16">
        <div class="fw600 fs16">选择免费证件类型</div>
      </div>

      <el-form :model="form1" ref="ruleForm2" >
        <el-row>
          <el-col :span="24">
            <p class="pb10 flex alc">
              <span>选择免费证件类型</span>
            </p>
            <el-form-item class="w100" prop="extraCertType">
              <el-select  v-model="form2.extraCertType" placeholder="选择免费证件类型">
                <el-option
                  v-for="item in discountCertificatesMap"
                  :key="item"
                  :label="getDiscountCertificatesMap(item)"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="text-right">
          <el-col :span="24" >
            <el-form-item>
              <el-button @click="resetForm2('ruleForm2')"
                >取消</el-button
              >
              <el-button type="primary"  @click="submitForm2('ruleForm2')">确认</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { getMemberTicketInfoList, saveMemberTicketInfo, checkOrderVisitorInfos, checkOrderVisitorInfo } from '@/http/protocol'
import { cardType, cardTypeList, discountCertificatesMap } from '@/const/cardType'
import { mapMutations, mapState } from 'vuex'
import store from '@/store/index'

// console.log(bindCertificate, checkOrderVisitorInfo, checkOrderVisitorInfos,bindCertificate)

// 下单的时候 绑定成人信息 不需要吊接口
// 绑定成人信息的接口是在详情时候 吊的

export default {
  name: 'trueinfobox',
  data () {
    return {
      checkboxGroup1: [],
      cities: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      form: {
        realname: '',
        certificateType: '',
        certificateNo: ''
      },
      form1: {
        relativeId: '',
        realname: '',
        certificateType: '',
        certificateNo: ''
      },
      form2: {
        extraCertType: ''
      },
      rules: {
        realname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        certificateType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
        certificateNo: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
        relativeId: [{ required: false }]
      },
      cardType,
      cardTypeList,
      discountCertificatesMap: Object.keys(discountCertificatesMap)
    }
  },
  computed: {
    ...mapState('ticketinfo', ['ticket', 'period', 'trueInfo']),
    ...mapState('user', ['loginS']),

    checkboxGroup2 () {
      let arr = []
      if (this.cities.length > 0) {
        arr = this.cities.filter(item => this.checkboxGroup1.includes(item.id))
      }
      this.setTrueInfo(arr)
      return arr
    },
    auditOption () {
      return this.cities.filter(item => item.youngFlag === 'N')
    }

  },
  watch: {
    ticket (val) {
      this.cities.forEach(item => item.needCard === false)
      this.setTrueInfo(null)
      this.checkboxGroup1 = []
    }
  },
  methods: {
    hadId (id) {
      return this.checkboxGroup1.includes(id)
    },
    add2 () {
      if (!this.loginS) {
        store.commit('user/showlogin', true)
        return
      }
      this.dialogFormVisible = true
    },
    async adduser (id) {
      if (this.checkboxGroup1.includes(id)) {
        this.checkboxGroup1 = this.checkboxGroup1.filter(item => item !== id)
        this.cities.forEach(item => {
          if (item.id === id) {
            item.needCard = false
          }
        })
      } else {
        // 检测可不可以购买当前票种
        const param = {
          scheduleId: this.ticket.id,
          orderVisitorInfos: JSON.stringify([{ id }])
        }
        const res = await checkOrderVisitorInfos(param)
        // discountFlag  Y 没有优惠   N 有优惠
        // discountType  normal 普通票      age 优惠票
        if (res.success) {
          const data = res.data || []
          const obj = data[0] || {}
          const discountFlag = obj.discountFlag
          const discountType = this.ticket.discountType
          console.log(res, this.ticket, discountFlag)
          if (discountType === 'age') {
            if (discountFlag === 'Y') {
              this.checkboxGroup1.push(id)
            } else {
              // 加一项 附加证件 而且是必填
              this.cities.forEach(item => {
                if (item.id === id) {
                  item.needCard = true // 需要添加特殊证件
                }
              })
              this.checkboxGroup1.push(id)
            }
          } else if (discountType === 'normal') {
            if (discountFlag === 'N') {
              this.checkboxGroup1.push(id)
            } else {
              this.$confirm('建议您重新购买优惠票', { type: 'warning', cancelButtonText: '放弃优惠' }).then(res => {
              }).catch(res => {
                this.checkboxGroup1.push(id)
              })
            }
          }
        }
        // this.checkboxGroup1.push(id)
      }
    },
    ...mapMutations('ticketinfo', ['setTrueInfo']),
    async getMemberTicketInfoList (callback = () => {}) {
      const res = await getMemberTicketInfoList()
      if (res.success) {
        const { data: { resultList } } = res
        this.cities = resultList
        this.$nextTick(() => {
          callback && callback()
        })
      } else {
        this.$err(res.msg)
      }
      // console.log(res)
    },
    showedit (item) {
      this.dialogFormVisible = true
      this.form = { ...item }
    },
    showedit1 (item) {
      this.dialogFormVisible1 = true
      this.form1 = { ...item }
    },
    showedit2 (item) {
      this.dialogFormVisible2 = true
      this.form2 = { ...item }
      console.log(this.form2)
    },
    resetForm (formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    resetForm1 (formName) {
      this.dialogFormVisible1 = false
      this.$refs[formName].resetFields()
    },
    resetForm2 (formName) {
      this.dialogFormVisible2 = false
      this.$refs[formName].resetFields()
    },
    async submitForm1 (formName) {
      // console.log(this.form1, this.trueInfo)
      if (this.form1.relativeId) {
        const param1 = {
          ticketInfoId: this.form1.relativeId,
          reservePeriodId: this.period.id
        }
        const res = await checkOrderVisitorInfo(param1)
        if (res.success) {
          const index = this.trueInfo.findIndex(item => item.id === this.form1.id)
          this.trueInfo[index].relativeId = this.form1.relativeId
          this.setTrueInfo(this.trueInfo)
          this.resetForm1('ruleForm1')
        } else {
          this.$err(res.msg)
        }
      }
      // if (this.form1.relativeId) { //

      //   console.log(param1)
      //   console.log(res)
      //   // if (res.success) {
      //   //   const data = res.data || []
      //   //   const res2 = data[0] || {}
      //   //   if (res2.discountFlag === 'Y') {
      //   //     console.log('满足优惠条件')
      //   //   }
      //   // }
      //   const param = {
      //     id: this.form1.id,
      //     ticketInfoId: this.form1.relativeId // 关联id
      //   }
      //   const res1 = await bindCertificate(param)
      //   if (res1.success) {
      //   } else {
      //     this.$err(res1.msg)
      //   }
      // }
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.saveMemberTicketInfo()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitForm2 (formName) {
      const { extraCertType, id } = this.form2
      this.cities.forEach(item => {
        if (item.id === id) {
          item.needCard = false
          item.extraCertType = extraCertType
        }
      })
      const index = this.trueInfo.findIndex(item => item.id === id)
      this.trueInfo[index].relativeId = this.form1.relativeId
      this.setTrueInfo(this.trueInfo)
      console.log(this.trueInfo)
      this.resetForm2(formName)
    },
    async saveMemberTicketInfo () {
      // 350525198104021326
      // 350525198401303012
      // 310102198708173642
      // 310102197611264420
      const { realname, certificateType, certificateNo, id } = this.form
      const param = { realname, certificateType, certificateNo, id }
      // console.log(param)
      const res = await saveMemberTicketInfo(param)
      if (res.success) {
        this.$ok(id ? '修改成功！' : '添加成功！')
        this.resetForm('ruleForm')
        this.getMemberTicketInfoList(
          () => {
            this.checkboxGroup1 = [...this.checkboxGroup1, res.data.id]
          }
        )
      } else {
        this.$err(res.msg)
      }
      // console.log(res)
    }
  },
  mounted () {
    this.getMemberTicketInfoList()
  }
}
</script>

<style scoped lang="less">
.tips {
  width: 10px;
}
.trueinfobox {
  .w100 {
    width: 100%;
    .el-select {
      width: 100%;
    }
  }
  .need-card {
    color: #ff5454;
    font-size: 12px;
    cursor: pointer;
  }

    .check-btn {
      margin-bottom: 10px;
      &:focus {
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
      }
    }

  .check-btn-cur {
    color: #019844 !important;
    border-color: rgb(179, 224, 199) !important;
    background-color: rgb(230, 245, 236)  !important;

    }
  /deep/.trueinfomodal {
    /deep/.el-dialog__body {
      // min-height: 200px;
      .el-form {
        width: 100%;
        img {
          width: 15px;
        }
      }
    }
  }
  padding-top: 32px;
  .trueinfobox-title {
    padding-bottom: 8px;
  }
  .often-contact {
    background: #fafafa;
    padding-top: 10px;
    /deep/.el-checkbox-button {
      border: 1px solid #dcdfe6;
      margin-right: 10px;
      border-radius: 2px;

      .el-checkbox-button__inner {
        padding: 7px 25px;
        box-shadow: none;
        border: none;
      }
    }
    /deep/ .el-checkbox-button.is-checked {
      border: 1px solid #009769;

      .el-checkbox-button__inner {
        background: rgba(0, 151, 105, 0.1);

        font-weight: 500;
        color: #009769;
      }
    }

    .often-contact-b {
      margin-left: 10px;
    }
  }
  .added-person {
    margin-top: 8px;
    flex-wrap: wrap;
    .added-person-item {
      padding: 13px 16px 12px 20px;
      min-width: 286px;
      min-height: 84px;
      background: #ffffff;
      border: 1px solid #f4f4f4;
      margin-right: -1px;
      margin-bottom: 10px;
      &:first-child {
        margin-right: -1;
      }
      img {
        width: 24px;
        cursor: pointer;
        border: 1px  dashed #ccc;
      }

      .per-name {
        font-size: 14px;
        font-weight: 500;
        color: #4d4d4d;
        line-height: 20px;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        // justify-content: center;
        .yong {
          padding: 1px 3px;
          background: #5FD4A3;
          border-radius: 3px;
          font-size: 11px;
          font-weight: 500;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 6px;

}
          }
      .p-number {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 17px;
      }
    }
    .add-box {
      width: 286px;
      height: 84px;
      background: #ffffff;
      border: 1px solid transparent;
      margin-left: 1px;
    }
  }
}
</style>
